<template>
	<view class="merchant-services-wrap">
		<scroll-view class="waitsScroll" scroll-y="true">
			<view class="saomas_1" v-if="!form.departDate" @click="saoma()">
				<img class="icondibudaohanglan-ss" src="@/static/imge/saomas.svg" alt="" />

			</view>
			<view class="" style="height: 80upx;display: flex;align-items: center;justify-content: center;"
				v-if="form.departDate">

			</view>
			<view class="qrcodes" v-if="form.departDate">
				<view class="BuyTicket_1x">
					{{form.startPoint||''}} <text class="iconfont icondanxiangzhuanhuan"
						style="color: #999;margin: 0 10upx;"></text>
					{{form.endPoint||''}}
				</view>
				<view class="qrcodes_2">
					<view class="titlse_6">
						<view class="MyOrder_1x">
							<view class="MyOrder_1x_1">
								{{form.departDate||''}} {{form.departTime||''}}发车
							</view>
							<view class="MyOrder_1x_2">
								票数:<text
									style="color: #4374eb;font-size: 36upx;font-weight: 500;margin: 0 10upx;">{{form.seatSum||''}}</text>
								张

							</view>
						</view>
						<view class="MyOrder_1y">
							<view class="MyOrder_1y_2">
								<view class="MyOrder_1y_2x">
									<text class="MyOrder_1y_2x-1x"></text>
									{{form.startPoint||''}}
								</view>
								<view class="MyOrder_1y_2x" style="color: #999;font-size: 24upx;">
									<text class="MyOrder_1y_2x-1x"
										style="background-color: #f7f7f7;border-color: #f7f7f7;"></text>
									{{form.address||''}}
								</view>
								<view class="MyOrder_1y_2x">
									<text class="MyOrder_1y_2y-1y"></text>
									{{form.endPoint||''}}
								</view>
							</view>
							<view style="font-size:30upx;margin-left: auto;color: #fff;padding: 10upx 20upx;background-color:orangered;border-radius: 16upx;" @click="tejian()">
								特检
							</view>
						</view>
					</view>
				</view>
				<view class="qrcodes_1">
					<view class="qrcodes_1l">

					</view>
					<view class="qrcodes_1r">

					</view>
					<view class="qrcodes_1x">
						座位号：{{form.seat||''}}
					</view>
					<view class="qrcodes_1z">
						¥ {{form.priceSum?form.priceSum.toFixed(2):''}}
					</view>
				</view>
			</view>
			<view class="bntus" @click="saoma()">
				{{form.departDate?'继续扫码':'扫码验票'}}
			</view>
			<view class="bntuA" @click="send()" v-if="form.departDate">
				确认验票
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				form: {},
			}
		},
		onLoad(options) {},
		onReady() {

		},
		onShow() {


		},
		methods: {
			...mapMutations(['getData']),
			tejian(){
				uni.navigateTo({
					url:'/pagesB/SpecialInspection/SpecialInspection?id='+encodeURIComponent(JSON.stringify(this.form))
				})
			},
			saoma() {
				var that = this
				uni.showLoading({
					title: '扫码中',
					mask: true
				});
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
						var data = JSON.parse(res.result)
						console.log(data)
						that.form = data
						uni.hideLoading()
					},
					fail() {
						uni.hideLoading()
					}
				});
			},
			send() {
				var that = this
				const obj = {
					url: "ddOrderInfo/save",
					data: {
						"id": this.form.id,
						"status": 2,
						"iiFlag": '0'
					},
					success(res) {
						uni.showToast({
							title: '验票成功',
							duration: 3000,
							icon: 'none'
						});
					},
					fail(res) {
						uni.showToast({
							title: res.msg,
							duration: 3000,
							icon: 'none'
						});
						console.log(res)
					},
					complete(res) {
						console.log(res)
					}
				};
				that.getData(obj);
			},

		}
	}
</script>

<style lang="scss" scoped>
	.waitsScroll {
		flex: 1;
		overflow: auto;
		background-color: #f7f7f7;
	}

	.qrcodes {
		margin: 0 40upx;
		background-color: #fff;
		border-radius: 16upx;

	}

	.BuyTicket_1x {
		font-size: 32upx;
		font-weight: 500;
		height: 100upx;
		line-height: 100upx;
		padding: 0 30upx;
	}


	.saomas_1 {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding-top: 280upx;
		padding-bottom: 80upx;

		.icondibudaohanglan-ss {
			height: 500upx;
			width: 500upx;
			border-radius: 50%;
			text-align: center;
			background-color: #fff;
			color: #ccc;
		}
	}

	.bntus {
		height: 90upx;
		width: 650upx;
		line-height: 90upx;
		margin: 0 50upx;
		text-align: center;
		box-sizing: border-box;
		border-radius: 45upx;
		color: #fff;
		background-color: #4374eb;
		font-size: 32upx;
		font-weight: 500;
		margin-top: 100upx;
	}

	.bntuA {
		height: 90upx;
		width: 650upx;
		line-height: 90upx;
		margin: 0 50upx;
		text-align: center;
		background-color: #80d061;
		border-radius: 45upx;
		color: #fff;
		font-size: 32upx;
		font-weight: 500;
		margin-top: 50upx;
	}

	.qrcodes_2 {
		padding: 30upx;
		padding-top: 0;

		.titlse_6 {
			background-color: #f7f7f7;
			padding: 25upx;
			border-radius: 16upx;

			.MyOrder_1x {
				font-size: 30upx;
				font-weight: 500;
				display: flex;
				align-items: center;

				.MyOrder_1x_2 {
					margin-left: auto;
				}
			}

			.MyOrder_1y {
				display: flex;
				align-items: center;
				margin-top: 5upx;

				.MyOrder_1y_2 {
					.MyOrder_1y_2x {
						font-size: 28upx;
						display: flex;
						align-items: center;
						margin-top: 10upx;

						.MyOrder_1y_2x-1x {
							width: 16upx;
							height: 16upx;
							background: #61d34e;
							border-radius: 50%;
							border: 6upx solid #dff6dc;
							margin-right: 10upx;
						}

						.MyOrder_1y_2y-1y {
							width: 16upx;
							height: 16upx;
							background: #f3b158;
							border-radius: 50%;
							border: 6upx solid #fcefdd;
							margin-right: 10upx;
						}
					}
				}
			}
		}
	}

	.qrcodes_1 {
		height: 100upx;
		border-top: 2upx dashed #ccc;
		position: relative;
		font-size: 30upx;
		display: flex;
		align-items: center;
		padding: 0 30upx;

		.qrcodes_1l {
			width: 40upx;
			height: 40upx;
			border-radius: 50%;
			background-color: #f7f7f7;
			position: absolute;
			top: -20upx;
			left: -20upx;
		}

		.qrcodes_1r {
			width: 40upx;
			height: 40upx;
			border-radius: 50%;
			background-color: #f7f7f7;
			position: absolute;
			top: -20upx;
			right: -20upx;
		}

		.qrcodes_1z {
			margin-left: auto;
			font-size: 32upx;
			color: red;
		}

		.qrcodes_1x {
			font-weight: 500;
		}
	}
</style>